<template>
  <div class="foot">
    <div class="footer">
      <div class="footer-left">
        <div class="logo">
          <img src="@/assets/images/logo_white.png" alt="" srcset="" />
        </div>
        <div class="wechat">
          <img :src="contactData.wx_code" alt="" srcset="" />
          <p>关注官方微信公众号</p>
        </div>
      </div>
      <div class="footer-centet">
        <h1>组织机构</h1>
        <p><span>主办单位：</span>中国电子信息产业发展研究院</p>
        <p><span></span>湖南省工业和信息化厅</p>
        <p><span></span>株洲市人民政府</p>
        <p><span>执行单位：</span>株洲市工业和信息化局</p>
        <p><span></span>株洲国家高新技术产业开发区</p>
        <p><span></span>中国信息化周报</p>
        <p><span></span>中国软件园区发展联盟</p>
        <p><span></span>华为云计算技术有限公司</p>
      </div>
      <div class="footer-right">
        <h1>联系我们</h1>
        <p><span>地址：</span>{{ contactData.address }}</p>
        <p><span>邮编：</span>{{ contactData.zip_code }}</p>
        <p><span>电话：</span>{{ contactData.phone }}</p>
        <p><span>邮箱：</span>{{ contactData.email }}</p>
        <p><span>官方QQ群：</span>{{ contactData.qq_group }}</p>
      </div>
    </div>
    <div class="bottom-beian">
      <p>
        <a target="_blank" href="https://beian.miit.gov.cn"
          >京ICP备16006243号-20</a
        >
      </p>
      <p>
        <a
          target="_blank"
          href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010802028014"
          >京公网安备11010802028014号</a
        >
      </p>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapActions } from "vuex";
export default {
  data() {
    return {};
  },
  mounted() {
    this.getContactData();
  },
  methods: {
    ...mapActions(["getContactData"]),
  },
  computed: {
    ...mapGetters(["contactData"]),
  },
};
</script>

<style scoped>
.footer {
  background: url("../assets/images/index/bottom_bg.png") no-repeat center;
  padding: 40px 0 30px;
  background-size: cover;
}
.footer-left {
  text-align: center;
  font-size: 20px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #ffffff;
}
.logo img {
  width: 40%;
  height: auto;
}
.wechat img {
  width: 28%;
  height: auto;
}
.footer-left p {
  font-size: 13px;
}

.footer-centet,
.footer-right {
  width: 70%;
  margin: 20px auto;
  font-size: 13px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #999;
  line-height: 1.8;
}
.footer-centet h1,
.footer-right h1 {
  font-size: 16px;
  font-weight: bold;
  color: #ffffff;
}
.footer-centet span {
  width: 70px;
  display: inline-block;
}
.bottom-beian {
  padding: 10px 0;
  width: 100%;
  text-align: center;
  background: #0d0d0e;
}
.bottom-beian a {
  font-size: 14px;
  color: #999;
}
.bottom-beian a:hover {
  color: #fff;
}
</style>